<template>
  <!-- 财富管理 -->
  <div>
    <van-nav-bar fixed title="我的收益" left-arrow @click-left="$utils.back($route.path);" />
    <div class="has-top">
      <div class="pt-36 plr-24">
        <div class="flex-s-c color-white ">
          <div class="box-left pos-r">
            <p class="money"><span>￥</span>{{ data.MonthPofit||0 }}</p>
            <p class="title">本月预估结算</p>
            <img src="@/assets/images/wealthManage/icon-02.png" class="img-1">
          </div>
          <div class="box-right pos-r">
            <p class="money"><span>￥</span>{{ data.NextMonthPofit||0 }}</p>
            <p class="title">下月预估结算</p>
            <img src="@/assets/images/wealthManage/icon-03.png" class="img-1">
          </div>
        </div>
        <div class="flex-s-c date-box">
          <span v-for="(item,index) in dateList" :key="index" class="dateItem" :class="activeIndex==index?'active':''" @click="changeTab(index)">{{ item }}</span>
          <div class="flex-s-0 filter-box flex-s-c" @click="openDatetimeSelect"><span>筛选</span><img src="@/assets/images/wealthManage/icon-01.png" class=""></div>
        </div>
        <div v-if="list&&list.length>0" class="info">
          <!-- <div class="info"> -->
          <div class="info-top">
            <div class="">
              <span class="info-title">总计金额</span>
              <span class="info-dis color-gray-light">共计{{ list.length }}笔</span>

            </div>
            <div class="flex-s-fe">
              <div class="text-box-1">
                <span class="text-re">¥</span>
                <span class="text-num">{{ totalNum.toFixed(2) }}</span>
              </div>
              <img src="@/assets/images/wealthManage/icon-04.png" class="img">
            </div>
          </div>
          <div class="info-bottom">
            <div v-for="(item,index) in list" :key="index" class="flex-s-c">
              <span class="info-item">{{ item.Name }}</span>
              <span class="info-item">￥{{ item.Pofit }}</span>
            </div>
          </div>
        </div>
        <div v-else>
          <div class="data-empty">
            <img class="img" src="@/assets/images/wealthManage/empty.png">
            <div class="text">~ 暂无数据 ~</div>
          </div>
        </div>
      </div>
    </div>

    <datetime-select
      title="请选择开始时间"
      :show="timeStartSelect"
      @onConfirm="onStartConfirm"
      @clickOverlay="clickOverlay"
    />
    <datetime-select
      title="请选择结束时间"
      :show="timeEndSelect"
      @onConfirm="onEndConfirm"
      @clickOverlay="clickOverlay"
    />
  </div>
</template>

<script>
import datetimeSelect from 'components/datetimeSelect'
import { GetMemberMouthPofit, GetMemberMouthPofitList } from 'api/member'
export default {
  components: { datetimeSelect },
  data() {
    return {
      activeIndex: 0,
      dateList: ['今日', '本月', '上月', '近30天'],

      // 时间选择框显示
      timeStartSelect: false,
      timeEndSelect: false,

      // 时间筛选
      datetime: {},
      datetime1: {},

      // 收益汇总
      data: {},
      // 收益明细
      list: [],
      totalNum: 0
    }
  },
  created() {
    this.datetime1.startTime = this.$utils.thisMonth().startDate
    this.datetime1.endTime = this.$utils.thisMonth().endDate
    this.getMemberMouthPofit(this.datetime1)
    this.datetime.startTime = this.$utils.today().startDate
    this.datetime.endTime = this.$utils.today().endDate
    this.getMemberMouthPofitList(this.datetime)
  },
  methods: {
    changeTab(index) {
      if (this.activeIndex != index) {
        this.activeIndex = index
        switch (Number(index)) {
          case 0: // 今日
            this.datetime.startTime = this.$utils.today().startDate
            this.datetime.endTime = this.$utils.today().endDate
            break
          case 1: // 本月
            this.datetime.startTime = this.$utils.thisMonth().startDate
            this.datetime.endTime = this.$utils.thisMonth().endDate
            break
          case 2: // 上月
            this.datetime.startTime = this.$utils.lastMonthE().startDate
            this.datetime.endTime = this.$utils.lastMonthE().endDate
            break
          case 3: // 最近30天
            this.datetime.startTime = this.$utils.last30().startDate
            this.datetime.endTime = this.$utils.last30().endDate
            break
          default:
            break
        }
        // 此处重新请求接口
        this.refresh()
      }
    },
    openDatetimeSelect() {
      this.timeStartSelect = true
    },
    onStartConfirm(value) {
      this.datetime.startTime = this.$utils.dateFomat('yyyy-mm-dd', value)
      this.timeStartSelect = false
      this.timeEndSelect = true
    },
    onEndConfirm(value) {
      this.datetime.endTime = this.$utils.dateFomat('yyyy-mm-dd', value)
      if (this.datetime.endTime < this.datetime.startTime) {
        this.$toast({
          message: '结束时间不得小于开始时间，请重新选择'
        })
        return
      }
      this.activeIndex = -1
      this.timeStartSelect = false
      this.timeEndSelect = false
      this.refresh()
    },
    refresh() {
      console.log(this.datetime)
      this.getMemberMouthPofitList(this.datetime)
    },
    clickOverlay() {
      this.timeStartSelect = false
      this.timeEndSelect = false
    },
    // 获取本月收益
    getMemberMouthPofit(params) {
      GetMemberMouthPofit(params).then(res => {
        if (res) {
          this.data = res.Data
        }
      })
    },
    // 获取收益项目
    getMemberMouthPofitList(params) {
      GetMemberMouthPofitList(params).then(res => {
        if (res) {
          this.list = res.Data || []
          if (this.list && this.list.length > 0) {
            this.totalNum = 0
            this.list.forEach(item => {
              this.totalNum += item.Pofit
            })
          }
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .box-left,.box-right{
    background: linear-gradient(135deg, #558CFF 0%, #5595FF 100%);
    padding: 24px;
    width:calc(50% - 12px);
    border-radius: 16px;
    .money{
      font-size:44px ;
      font-weight: 600;
      margin-bottom: 24px;
      span{
        font-size: 32px;
      }
    }
    .title{
      font-size: 24px;
    }
    .img-1{
      width: 80px;
      height: 94px;
      position: absolute;
      bottom: -4px;
      right: 0;
    }
  }
  .box-right{
    background: linear-gradient(314deg, #3E739B 0%, #73A7D0 100%);
  }
  .date-box{
    margin: 40px 0 32px;
    .dateItem{
      font-size: 28px;
      flex: 1;
      text-align: center;
      padding: 12px 20px;
      border-radius: 33px;;
    }
    .active{
      @include bg-primary;
      color:$colorF;
    }
    .filter-box{
      margin-left: 20px;
      span{
        font-size: 26px;
      }
      img{
        height: 40px;
        width: 40px;
      }
    }
  }

  .info{
			background: $colorF;
			border-radius: 16px;
			position: relative;
			&:after{
				position: absolute;
				content: "";
				width: 100%;
				border-bottom: 32px dotted  $colorF5;
				bottom: -16px;
				left: 0;
			}
			.info-top{
				padding:36px 32px 40px;
				position: relative;
				.info-title{
					font-size: 28px;
					font-weight: 600;
				}
				.info-dis{
					font-size: 24px;
					margin-left: 20px;
				}
				.text-box-1{
					padding-top: 40px;
				}
				.text-re{
					font-size: 36px;
					font-weight: 600;
				}
				.text-num{
					font-size: 60px;
					font-weight: 600;
				}
				.img{
					width: 96px;
					height: 96px;
					flex-shrink: 0;
				}
			}
			.info-bottom{
				border-top: 2px dashed $colorF5;
				padding: 24px 32px 48px;
				position: relative;
				.info-item{
					line-height: 60px;
					font-size: 28px;
				}
				&::before,&::after{
					position: absolute;
					content: "";
					display: inline-block;
					width: 32px;
					height: 32px;
					border-radius: 26px;
					background:  $colorF5;
					z-index: 2;
					top: -16px;
					right: -16px;
				}
				&::after{
					left: -16px;
				}
			}
		}

.data-empty{
		text-align: center;
		.img{
			width: 400px;
			height: 300px;
		}
		.text{
			font-size: 28px;
			color: $color6;
		}
	}
</style>
